<template>
  <div class="smartcoupon-detail">
    <div class="detail-table">
      <Row>
        <Col span="24" class="detail-table__col detail-table__title">
          定向发券详情
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--5">活动名称：</span>
          <span class="detail-table__content--5">{{ details.activityName }}</span>
        </Col>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--5">会员筛选：</span>
          <span class="detail-table__content--5">{{ details.memberNum }}</span>
        </Col>
      </Row>
      <Row class="no-bottom-border">
        <Col span="4" class="detail-table__col no-right-border" style="padding-right: 0">优惠券名称</Col>
        <Col span="4" class="detail-table__col no-right-border" style="padding-right: 0">面额</Col>
        <Col span="4" class="detail-table__col no-right-border" style="padding-right: 0">类型</Col>
        <Col span="4" class="detail-table__col no-right-border" style="padding-right: 0">有效期</Col>
        <Col span="4" class="detail-table__col no-right-border" style="padding-right: 0">可用渠道</Col>
        <Col span="4" class="detail-table__col" style="padding-right: 0">最低使用金额(元)</Col>
      </Row>
      <Row v-for="(item, index) in tables" :key="index" :class="{ 'no-bottom-border': tables.length !== index + 1 }">
        <Col span="4" class="detail-table__col no-right-border" style="padding-right: 0">{{ item.couponName }}</Col>
        <Col span="4" class="detail-table__col no-right-border" style="padding-right: 0">{{ (item.couponType === 1 ? Number(item.promotionAmount) * 1000 / 100 : item.promotionAmount) + (item.couponType === 0 ? '元' : item.couponType === 1 ? '折' : '枚') }}</Col>
        <Col span="4" class="detail-table__col no-right-border" style="padding-right: 0">{{ getEnumsName(item.couponType, couponTypeList) }}</Col>
        <Col span="4" class="detail-table__col no-right-border" style="padding-right: 0">{{ item.expirationType ? (item.startTime + '至' + item.endTime) : (item.dayNum + '天') }}</Col>
        <Col span="4" class="detail-table__col no-right-border" style="padding-right: 0">{{ getChannelsName(item.channel) }}</Col>
        <Col span="4" class="detail-table__col" style="padding-right: 0">{{ item.accumAmount }}</Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--5">发放时间：</span>
          <span class="detail-table__content--5">{{ (details.activityStart || '').replace(/-/g, '/') }}</span>
        </Col>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--3">状态：</span>
          <span class="detail-table__content--3">{{ getEnumsName(details.activityStatus, allStatus) }}</span>
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--7">微信消息模板：</span>
          <span class="detail-table__content--7">{{ isSendMsg.wechat ? isSendMsg.wechatTitle : '无' }}</span>
        </Col>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--7">短信消息模板：</span>
          <span class="detail-table__content--7">{{ isSendMsg.message ? isSendMsg.msgTitle : '无' }}</span>
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--5">创建时间：</span>
          <span class="detail-table__content--5">{{ (details.createTime || '').replace(/-/g, '/') }}</span>
        </Col>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--5">编辑时间：</span>
          <span class="detail-table__content--5">{{ (details.updateTime || '').replace(/-/g, '/') }}</span>
        </Col>
      </Row>
      <Row>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--4">创建人：</span>
          <span class="detail-table__content--4">{{ details.creatorName }}</span>
        </Col>
        <Col span="12" class="detail-table__col">
          <span class="detail-table__label--4">编辑人：</span>
          <span class="detail-table__content--4">{{ details.operatorName }}</span>
        </Col>
      </Row>
      <Row v-if="isSendMsg.wechat">
        <Col span="24" class="detail-table__col">
          <span class="detail-table__label--7">微信消息模板：</span>
          <span class="detail-table__content--7">{{ isSendMsg.wechatMsg }}</span>
        </Col>
      </Row>
      <Row v-if="isSendMsg.message">
        <Col span="24" class="detail-table__col">
          <span class="detail-table__label--7">短信消息模板：</span>
          <span class="detail-table__content--7">{{ isSendMsg.msg }}</span>
        </Col>
      </Row>
      <Row>
        <Col span="24" class="detail-table__col">
          <span class="detail-table__label--3">备注：</span>
          <span class="detail-table__content--3">{{ details.remark }}</span>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import enums from './enums'
import enumsMixs from '../enums'
import { queryCoupon } from '@/api/market/smartcoupon.js'
export default {
  name: 'market_smart_coupon_detail',
  mixins: [enums, enumsMixs],
  data () {
    return {
      details: {},
      tables: [],
      messages: []
    }
  },
  computed: {
    isSendMsg () {
      let wechat = false
      let wechatTitle = ''
      let wechatMsg = ''
      let message = false
      let msgTitle = ''
      let msg = ''
      this.messages.forEach(item => {
        if (item.templateType === 1) {
          wechat = true
          wechatTitle = item.templateName
          wechatMsg = item.content
        } else if (item.templateType === 2) {
          message = true
          msgTitle = item.templateName
          msg = item.content
        }
      })
      return { wechat, wechatTitle, wechatMsg, message, msgTitle, msg }
    }
  },
  mounted () {
    this.getDetail()
  },
  methods: {
    getDetail () {
      queryCoupon({
        activityId: this.$route.params.id
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.details = result.data || {}
          this.tables = result.data.giftVOs || []
          this.messages = result.data.templates || []
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.$Message.error(`${err}`)
      })
    },
    getChannelsName (value) {
      if (value) {
        return value.map((value) => {
          const result = this.channelList.filter(item => +item['value'] === +value)
          return result[0] ? result[0]['label'] : ''
        }).join('/')
      }
      return ''
    }
  }
}
</script>

<style lang="less">
@import '~@/assets/stylus/detail-table.less';
.smartcoupon-detail {
  padding: 40px 80px
}
</style>
